<template>
	<view class="">
		<view style="display: flex;justify-content: center;position: relative;overflow: hidden;">
		  <cmd-circle cid="circle19" type="circle" :percent="chartsData" :showInfo="false" :width="screenWidth" :stroke-width="11" :stroke-color="chartsColor" stroke-background="#e5e8f7"></cmd-circle>
		  <view class="info_box">
		    <view class="info">{{chartsData}}%</view>
		  </view>
		</view>
		<view class="tag">
			<text :style="{'backgroundColor':chartsColor}">{{chartsData}}%</text>
		</view>
		<view class="" style="text-align: center;font-size: 24rpx;">
			{{dataTxt}}
		</view>
	</view>
</template>

<script>
	import cmdCircle from "@/components/cmd-circle/cmd-circle.vue"
	export default{
		name:'charts',
		components: {cmdCircle},
		props:{
			screenWidth:{
				type:Number,
				default:80
			},
			chartsColor:{
				type:String,
				default:'#00ddd1'
			},
			chartsData:{
				type:Number,
				default:0
			},
			dataTxt:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.info_box{
		display: flex;
		align-items: center;
		justify-content: center;
		top: 19%;
		height: 59%;
		width: 63%;
		border-radius: 50%;
		border: 1px solid #e5e8f7;
		position: absolute;
		.info{
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.tag{
		text-align: center;
		margin-bottom: 10rpx;
		text{
			padding: 5rpx 25rpx;
			border-radius: 10rpx;
			color: #e6e6e6;
			font-size:24rpx; 
		}
	}

</style>